require( '$d/css/common.less' );
require('./fxsmall.css');
require( './style.less' );

define( [
  'require',
  'jquery',
  'header',
  './data'
], function( require, $ ) {

  var titleData = require( './data' ).data;
  var isNotTransition = !$.support.transitionEnd;
  if ( isNotTransition ) $( '.main_body' ).addClass( 'isNotTransition' );

  ( function() {

    var animationNameArray = [ {
      'leftName': 'rotateLeft',
      'rightName': 'rotateRight'
    }, {
      'leftName': 'slidLeft',
      'rightName': 'slidRight'
    }, {
      'leftName': 'slidInDownLeft',
      'rightName': 'slidOutDownRight'
    }, {
      'leftName': 'rotateTop',
      'rightName': 'rotateBottom'
    }, {
      'leftName': 'FadeIn',
      'rightName': 'FadeOut'
    } ];

    var randomIndex = parseInt( Math.random() * 5 );

    var animateLeft = animationNameArray[ randomIndex ].leftName,
      animateRight = animationNameArray[ randomIndex ].rightName;

    var showIndex = 0;
    $( '.title_type li' ).click( function() {

      $( this ).addClass( 'selected' ).siblings().removeClass( 'selected' );
      var thisIndex = $( this ).index();
      if ( isNotTransition ) {
        $( '.main_content>section' ).eq( thisIndex ).addClass( 'showInTop' ).siblings().removeClass( 'showInTop' );
      } else {
        $( '.main_content .showInTop' ).addClass( animateRight );
        showIndex = thisIndex;
      }

    } );

    // 离开
    var sectionTransitionEndRight = function() {
      $( '.main_content .showInTop' ).removeClass( 'showInTop' );
      $( this ).removeClass( animateRight );
      $( '.main_content section' ).eq( showIndex ).addClass( 'showInTop ' + animateLeft );
    }

    // 进入
    var sectionTransitionEndLeft = function() {
      $( this ).removeClass( animateLeft );
      $( '.showInTop' ).removeClass( 'showInTop' );
      $( this ).addClass( 'showInTop' );
    }

    // 循环读入标题数据
    var readData = function( index, item ) {

      var thisData = titleData[ index ];
      $( '.name_list .name .text', item ).each( function( innerIndex, innerItem ) {
        var nameText = thisData[ innerIndex ].name;
        if ( index != 1 ) {
          nameText = nameText.split( '' ).join( '<br/>' );
        }
        $( this ).html( nameText );

      } );

    }

    $( '.main_content' )
      .on( 'webkitAnimationEnd', '.' + animateRight, sectionTransitionEndRight )
      .on( 'animationend', '.' + animateRight, sectionTransitionEndRight );

    $( '.main_content' )
      .on( 'webkitAnimationEnd', '.' + animateLeft, sectionTransitionEndLeft )
      .on( 'animationend', '.' + animateLeft, sectionTransitionEndLeft );

    $( '.main_content section .main_bg' ).on( 'webkitAnimationEnd animationend', function() {
      return false;
    } );

    $( '.main_content section' ).each( readData );

  }() );


  // 取标题原则
  ! function() {

    var $section = $( '.main_content section:nth-child(1)' );
    var principleData = titleData[ 0 ];

    var mouseIn = function() {

      $( this ).addClass( 'active' ).siblings().removeClass( 'active' );

      $( '#describe', $section ).html( principleData[ $( this ).index() ].describe );

    }

    // 鼠标移入
    $( '.main_content .first .name_list .name' ).mouseenter( mouseIn ); // 拉伸动画完成

  }();

  // 标题命名方法
  ! function() {

    var $section = $( '.main_content section:nth-child(2)' );
    var principleData = titleData[ 1 ];

    var getHtml = function( title, example ) {

      var html = '';
      html += '<p>' + title + '</p>';
      for ( i in example ) {
        html += '<p>' + ( i == 0 ? '示例：' : '' ) + example[ i ] + '</p>'
      }
      return html;

    }

    var mouseIn = function() {

      $( this ).addClass( 'active' ).siblings().removeClass( 'active' );
      var data = principleData[ $( this ).index() ];
      $( '#detail', $section ).html( getHtml( data.title, data.example ) );

    }

    // 鼠标移入
    $( '.main_content .secend .name_list .name' ).mouseenter( mouseIn );

  }();

  // 热门标题关键字
  ! function() {

    var $section = $( '.main_content section:nth-child(3)' );
    var $animateObj = $( '.main_content .third .name_list .name' );
    var principleData = titleData[ 2 ];

    var getHtml = function( data ) {

      var html = '';
      html += '<p>关键词：</p>';
      html += '<p>' + data.keyword + '</p>';
      for ( i in data.example ) {
        html += '<p>' + ( i == 0 ? '示例：' : '' ) + data.example[ i ] + '</p>'
      }
      return html;

    }

    var mouseIn = function() {

      $( this ).addClass( 'active' ).siblings().removeClass( 'active' );
      var data = principleData[ $( this ).index() ];
      $( '.detail', $section ).html( getHtml( data ) );

    }

    var randomDelay = function( index, item ) {

      $( item ).addClass( 'vanishIn' ).css( {
        'animation-delay': ( Math.random() + .3 ).toFixed( 1 ) + 's'
      } );

    }

    var skewYModify = function() {

      $animateObj.removeAttr( 'style' ).removeClass( 'vanishIn' );
      $( '.main_content .third .name_list .left' ).addClass( 'skewYModifyLeft' );
      $( '.main_content .third .name_list .right' ).addClass( 'skewYModifyRight' );

    }

    var totalLen = $( '.main_content .third .name_list .name' ).length;
    var animationendLen = 0;
    var vanishInEnd = function() {
      animationendLen++;
      if ( totalLen === animationendLen ) {
        skewYModify();
      }
    }

    var skewYEnd = function() {
      $( '.main_content .third .name_list .left' ).removeClass( 'skewYModifyLeft' ).each( function( index, item ) {

        $( this ).css( {
          'animation-delay': ( Math.random() * 4 + .3 ).toFixed( 1 ) + 's'
        } ).addClass( 'topBottomFloatLeft' );

      } );



      $( '.main_content .third .name_list .right' ).removeClass( 'skewYModifyRight' ).each( function( index, item ) {

        $( this ).css( {
          'animation-delay': ( Math.random() ).toFixed( 1 ) + 's'
        } ).addClass( 'topBottomFloatRight' );

      } );


    }

    // 鼠标移入
    $animateObj.mouseenter( mouseIn ).each( randomDelay );

    // 失焦动画完成
    $( '.main_content .third' )
      .on( 'webkitAnimationEnd', '.vanishIn', vanishInEnd )
      .on( 'animationend', '.vanishIn', vanishInEnd );

    // 拉伸动画完成
    $( '.main_content .third' )
      .on( 'webkitAnimationEnd', '.skewYModifyLeft:first-child', skewYEnd )
      .on( 'animationend', '.skewYModifyLeft:first-child', skewYEnd );

  }();

  // 模板套用
  ! function() {

    var $section = $( '.main_content section:nth-child(4)' );
    var principleData = titleData[ 3 ];

    var getHtml = function( data ) {

      var html = '';
      html += '<span class="text_content"><span class="title">说明：</span><span class="sentence_con">' + data.describe + '</span></span>'

      for ( i in data.sentence ) {

        html += '<span class="content">';
        html += '<span class="text_content sentence">';
        html += '<span class="title">句型：</span><span class="sentence_con">' + data.sentence[ i ].data + '</span>';
        html += '</span>';
        html += '<span class="text_content example">';
        html += '<span class="title">示例：</span><span class="sentence_con">' + data.sentence[ i ].example + '</span>';
        html += '</span>';
        html += '</span>';

      }

      return html;

    }

    var mouseIn = function() {

      $( this ).addClass( 'active' ).siblings().removeClass( 'active' );
      var data = principleData[ $( this ).index() ];
      $( '.detail', $section ).html( getHtml( data ) );

    }

    var randomDelay = function( index, item ) {

      $( item ).addClass( 'fadeInscaleIn' ).css( {
        'animation-delay': ( Math.random() + .4 ).toFixed( 1 ) + 's'
      } );

    }

    var totalLen = $( '.main_content .fourth .name_list .name .light' ).length;
    var animationendLen = 0;
    var fadeInscaleInEnd = function() {
      $( '.text', $( this ).removeClass( 'fadeInscaleIn' ).addClass( 'topLoopModify' ).parent() ).css( {
        'opacity': 1
      } );

    }

    // 失焦动画完成
    $( '.main_content .fourth' )
      .on( 'webkitAnimationEnd', '.fadeInscaleIn', fadeInscaleInEnd )
      .on( 'animationend', '.fadeInscaleIn', fadeInscaleInEnd );

    // 鼠标移入
    $( '.main_content .fourth .name_list .name' ).mouseenter( mouseIn ).find( '.light' ).each( randomDelay );

  }();
} );
